<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/static/common/default.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="/style/header.jsp"></jsp:include>
</head>
<!-- header end -->

<body>
    <div class="title_bar">
        <h3>零星用工申请</h3>
    </div>
    <div class="apply">
    <form id="form"  name="form" action="${ctx}/wemployapply/save" enctype="multipart/form-data"  method="post">
        <div class="ipt_title">基本信息</div>
        <div class="ipt_list">
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">里程桩号</span>&nbsp;
                <input type="text" placeholder="请输入里程桩号" id="mileageCode" name="mileageCode">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">用工内容</span>
                <input type="text" placeholder="请输入用工内容" id="applyContent" name="applyContent">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">工程类别</span>
                <input type="text" class="slt" placeholder="请选择工程类别" id="project" name="project">
                <input type="hidden" id="projectId" name="projectId">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">工区名称</span>
                <input type="text" class="slt" value="" placeholder="请选择所属工段" id="gdmc" name="gdmc">
                <input type="hidden" id="segmentId" name="segmentId">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">工程量</span>
                <input type="number" placeholder="请输入工程量" id="quantities" name="quantities">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">施工队</span>
                <input type="text" class="slt" placeholder="请选择施工队" id="construction" name="construction">
                <input type="hidden" id="constructionId" name="constructionId">
            </div>
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">施工人员</span>
                <input type="text" placeholder="请输入施工人员用,隔开" id="onstructionPerson" name="onstructionPerson">
            </div>
            <!-- <div class="ipt_cell" style="display: none">
                <span class="tag">施工工时</span>
                <input type="text" placeholder="请输入施工工时" id="onstructionHour" name="onstructionHour">
            </div> -->
            <div class="ipt_cell">
                <span class="tag" style="margin-top: 3px;">工时单价</span>
                <input type="number" placeholder="请输入工时单价" id="hourPrice" name="hourPrice" onchange="calculation()">
            </div>
            <!-- <div class="ipt_cell" style="display: none">
                <span class="tag">费用</span>
                <input type="text" placeholder="请输入费用" id="fee" name="fee" readonly>
            </div> -->
            <div class="ipt_cell mui-radio">
                <span class="tag" >是否合同外？</span>
                <span>是</span>
                <input type="radio" value="1" name="isPlan" id="isPlan" checked />
                <span style="display:none">否 <input type="radio" value="0" name="isPlan" id="isPlan" /></span>
            </div>
            <div class="ipt_cell" style="border: none;">
                <span class="tag">附加照片</span>
                <div class="tip">前、中、后三张</div>
            </div>
            <div><input type="text" id="frontImage" name="frontImage" value="" style="display:none;"/><input type="text" id="middleImage" name="middleImage" value="" style="display:none;"/><input type="text" value="" id="behindImage" name="behindImage" style="display:none;"/></div>
            <input  type="file"  id="img1file" name="myfile" onchange="fileChange1(this,$('#frontImage'),$('#frontimg'))" style="display:none"/><input  type="file"  id="img2file" name="myfile" onchange="fileChange1(this,$('#middleImage'),$('#middleimg'))" style="display:none"/><input  type="file"  id="img3file" name="myfile" onchange="fileChange1(this,$('#behindImage'),$('#behindimg'))" style="display:none"/>
            <input type="file" id="uploadphoto" style="display:none;" />
            <div class="img_upload"><span class="add_img"><img src="${ctx}/style/images/img_upload.png" onclick="upload(1);" id="frontimg" alt=""></span><span class="add_img"><img src="${ctx}/style/images/img_upload.png" onclick="upload(2)" id="middleimg" alt=""></span><span class="add_img"><img src="${ctx}/style/images/img_upload.png" onclick="upload(3)" id="behindimg" alt=""></span></div>         
        </div>
        <input type="hidden" name="totle" id ="totle" value="0" >
        <div class="ipt_title">工时信息
        	<span class="btn btn2 add_hour_cell">添加</span>
        </div>
        <div class="ipt_list hour_cell">
            <div class="ipt_cell">
                <span class="tag">施工人员</span>
                <input type="text" class="sgry" id="persons0" name="persons0" placeholder="请输入施工人员">
            </div>
            <div class="ipt_cell">
                <span class="tag">人数</span>
                <input type="number" class="rs" id="personNumber0" name="personNumber0" placeholder="请输入人数" onchange="calculation()">
            </div>
            <div class="ipt_cell">
                <span class="tag">起始时间</span>
                <input type="text" class="date start_date" id="startTime0" name="startTime0" placeholder="起始时间"  onblur="updatetimes('0')"/>
            </div>
            <div class="ipt_cell">
                <span class="tag">结束时间</span>
                <input type="text" class="date end_date" id="endTime0" name="endTime0" placeholder="结束时间" onblur="updatetimes('0')"/>
            </div>
            <div class="ipt_cell">
                <span class="tag">扣除工时</span>
                <input type="number" class="gs" id="deductHour0" name="deductHour0" placeholder="请输入扣除工时" onblur="updatetimes('0')">
            </div>
            <div class="ipt_cell">
                <span class="tag">工时</span>
                <input type="text" class="gs" id="hours0" name="hours0" placeholder="请输入工时"  readonly>
            </div>
        </div>
        </form>
        <div class="btn btn_sub">申 请</div>
    </div>
    <jsp:include page="/style/footer.jsp"></jsp:include>
    <script src='${ctx}/style/upload/js/LocalResizeIMG.js'></script>
    <script src='${ctx}/style/upload/js/patch/mobileBUGFix.mini.js'></script>
    <script src='${ctx}/static/dist/lrz.bundle.js'></script>
    
    <!-- footer start -->
    <script>
    var personsarr=new Array();
    var personNumberarr=new Array();
    var startTimearr=new Array();
    var endTimearr=new Array();
    var hoursarr=new Array();
    var deductHourarr=new Array();
    for(var a=0;a<100;a++){
    	personsarr[a] = "persons"+a;
    	personNumberarr[a] = "personNumber"+a;
    	startTimearr[a] = "startTime"+a;
    	endTimearr[a] = "endTime"+a;
    	hoursarr[a] = "hours"+a;
    	deductHourarr[a] = "deductHour"+a;
    }
 
    $('.add_hour_cell').click(function() {
    	var flag = false;
    	var i = 0;
    	$(".ipt_list.hour_cell .ipt_cell").find("input").each(function () {
            if ($(this).val() == "") {
            	tiper('工时信息填写不完整');
            	flag = true;
            	return false;
            }
            
            if(i%6==1 && isNaN($(this).val())){
            	tiper('施工人数必须为数字');
            	flag = true;
            	return false;
            }
            
            if(i%6==4 && isNaN($(this).val())){
            	tiper('扣除工时必须为数字');
            	flag = true;
            	return false;
            }
            i++;
        })
        
        if(flag){
        	return;
        }
    	var oldtotle = $("#totle").val();
    	var newtotle = parseInt(oldtotle)+1
    	var d1 = '<div class="ipt_list hour_cell"><div class="ipt_cell">';
    	var d2 = '<span class="tag">施工人员</span><input type="text" class="slt sgry" name="'+personsarr[newtotle]+'" id="'+personsarr[newtotle]+'" placeholder="请输入施工人员"></div>';
    	var d3 = '<div class="ipt_cell"><span class="tag">人数</span><input type="text" class="rs" name="'+personNumberarr[newtotle]+'" id="'+personNumberarr[newtotle]+'" placeholder="请输入人数" onchange="calculation()"></div>';
    	var d4 = '<div class="ipt_cell"><span class="tag">起始时间</span><input type="text" class="date start_date" name="'+startTimearr[newtotle]+'" id="'+startTimearr[newtotle]+'" placeholder="起始时间" onblur="updatetimes('+newtotle+')"><i></i></div>';
    	var d5 = '<div class="ipt_cell"><span class="tag">结束时间</span><input type="text" class="date end_date" name="'+endTimearr[newtotle]+'" id="'+endTimearr[newtotle]+'" placeholder="结束时间" onblur="updatetimes('+newtotle+')"><i></i></div>';
    	var d7 = '<div class="ipt_cell"><span class="tag">扣除工时</span><input type="text" class="gs" name="'+deductHourarr[newtotle]+'" id="'+deductHourarr[newtotle]+'"  placeholder="请输入扣除工时" onblur="updatetimes('+newtotle+')"></div>';
    	var d6 = '<div class="ipt_cell"><span class="tag">工时</span><input type="text" class="gs" name="'+hoursarr[newtotle]+'" id="'+hoursarr[newtotle]+'" placeholder="请输入工时" readonly></div></div>';

    	$('.hour_cell:last').after(d1+d2+d3+d4+d5+d7+d6);
    	$("#totle").val(newtotle);

    });
    
    function updatetimes(obj){
    	var statrtimes = $("#"+startTimearr[obj]).val();
    	var endtimes = $("#"+endTimearr[obj]).val();
    	var deductHour = $("#"+deductHourarr[obj]).val();
    	if(statrtimes.length>0 && endtimes.length>0 && deductHour.length>0){
    		if(statrtimes>endtimes)
    		{
    		   alert("开始时间不能大于结束时间！");
    		   return false;
    		}else if(isNaN(deductHour)){
    			alert(deductHour);
    			alert("扣除工时必须为数字！");
     		    return false;
    		}
    		var startday = statrtimes.substring(0,10);
        	var starthour = statrtimes.substring(11);
    		var endday = endtimes.substring(0,10);
    		var endhour = endtimes.substring(11);
    		var date1 = Date.parse(startday); 
    		var date2 = Date.parse(endday); 
    		var chashi = ((date2-date1)/(60*60*1000))+parseFloat(endhour)-parseFloat(starthour)-parseFloat(deductHour);
    		$("#"+hoursarr[obj]).val(chashi);
    		calculation();
    	}
    }
    
    function calculation(){
    	var totle = $("#totle").val();
    	var hourPrice = $("#hourPrice").val();
    	var feecount = 0;
    	if(parseFloat(hourPrice)>0){
    		for(var j=0;j<parseInt(totle)+1;j++){
    			var shijian = $("#"+hoursarr[j]).val();
    			var personNumber = $("#"+personNumberarr[j]).val();
    			feecount += parseInt(shijian)*parseFloat(hourPrice)*parseInt(personNumber);
    		}
    		$("#fee").val(feecount)
    	}
    }

    var picker_gclb = new mui.PopPicker();
    picker_gclb.setData([{
        value: "1",
        text: "路基"
    }, {
        value: "2",
        text: "路面"
    } , {
    	value: "3",
        text: "桥涵"
    } , {
    	value: "4",
        text: "隧道"
    } , {
    	value: "5",
        text: "其他"
    }])
    $('#project').click(function() {
        picker_gclb.show(function(SelectedItem) {
            $('#project').val(SelectedItem[0].text);
            $('#project').attr('data-value', SelectedItem[0].value);
            $('#projectId').val(SelectedItem[0].value);
        })
    });
    // sgd
    var picker_sgd = new mui.PopPicker();
    picker_sgd.setData(${constructionteams});
    $('#construction').click(function() {
        picker_sgd.show(function(SelectedItem) {
            $('#construction').val(SelectedItem[0].text);
            $('#construction').attr('data-value', SelectedItem[0].value);
            $('#constructionId').val(SelectedItem[0].value);
        })
    });
    
    //所属工段
    var picker_gdmc = new mui.PopPicker();
    picker_gdmc.setData(${sectionitems});
    var secJson = '${defalutSecJson}';
    picker_gdmc.pickers[0].setSelectedValue(secJson.value,secJson.text);
    $('#gdmc').click(function() {
        picker_gdmc.show(function(SelectedItem) {
            $('#gdmc').val(SelectedItem[0].text);
            $('#gdmc').attr('data-value', SelectedItem[0].value);
            $('#segmentId').val(SelectedItem[0].value);
        })
    });
    
   $(document).ready(function(){
    	$('#gdmc').val(picker_gdmc.getSelectedItems()[0].text);
        $('#gdmc').attr('data-value', picker_gdmc.getSelectedItems()[0].value);
        $('#segmentId').val(picker_gdmc.getSelectedItems()[0].value);
    });
    $('.btn_sub').click(function(e) {
        var pass = 1;
        $('.apply input[type="text"]').each(function() {
            if (!$(this).val()) {
                var tag = $(this).parents('.ipt_cell').find('.tag').html();
                if ($(this).hasClass('slt') || $(this).hasClass('date')) 
                    tiper('请选择' + tag);
                else
                    tiper(tag + '不能为空');
                pass = 0;
                return false;
            }
        });
        if (!pass){
        	return false;
        }
            
        if ($('input[name="isPlan"]:checked').val() == undefined) {
            tiper('请选择是否合同外？');
            return false;
        }else{
        	 $('#form').isPlan = $('input[name="isPlan"]:checked').val();
        }
        
        if(isNaN($('#quantities').val())){
        	tiper('工程量必须是数字');
        	return false;
        }
        
        if(isNaN($('#hourPrice').val())){
        	tiper('施工单价必须是数字');
        	return false;
        }
        
        $(".rs").each(function(){ 
        	if(isNaN($(this).val())){
            	tiper('施工人数必须是数字');
            	return false;
            }
        })
        
        var totle = $("#totle").val();
        var gsxx = new Array();
        for(var i=0;i<parseInt(totle)+1;i++){
        	var sss = new Object();
        	sss.persons = $("#"+personsarr[i]).val();
        	sss.personNumber = $("#"+personNumberarr[i]).val();
        	sss.startTime = $("#"+startTimearr[i]).val();
        	sss.endTime = $("#"+endTimearr[i]).val();
        	sss.hours = $("#"+hoursarr[i]).val();
        	sss.deductHour = $("#"+deductHourarr[i]).val();
        	gsxx[i] =sss;
        }
        var datastr = new Object();
		datastr.mileageCode = $('#mileageCode').val();
		datastr.applyContent = $('#applyContent').val();
		datastr.projectId = $('#projectId').val();
		datastr.quantities = $('#quantities').val();
		datastr.constructionId = $('#constructionId').val();
		datastr.constructionName = $('#construction').val();
		datastr.onstructionPerson = $('#onstructionPerson').val();
		//datastr.onstructionHour = $('#onstructionHour').val();
		datastr.hourPrice = $('#hourPrice').val();
		datastr.fee = $('#fee').val();
		datastr.isPlan = $('input[name="isPlan"]:checked').val();
		datastr.frontImage = $('#frontImage').val();
		datastr.middleImage = $('#middleImage').val();
		datastr.behindImage = $('#behindImage').val();
		datastr.list = JSON.stringify(gsxx);
		datastr.applyUserId = "${currentUser.user_id}";
		datastr.pro_id = "${currentUser.projectID}";
		//datastr.segment_id = "${currentUser.segmentID}";
		datastr.segment_id = $('#segmentId').val();
		loading_show(); 
		$.ajax({
	        async: true,
	        type:"POST",
	        data:datastr,
	        url: "${ctx}/wemployapply/save?mid="+Math.random(),
	        dataType: "json",
	        success : function(data) {
	        	loading_hide(500);
        		if (data != undefined && data.status != undefined
        				&& data.status.trim() == '0') {
        		
        			result = true;
        			tiper(data.error, 'green');
        			window.location.href = "${ctx}/wemployapply/toSuccess";
        		} else {
        			result = false;
        			tiper(data.error);
        		}
        	}
		},"json");
        //$('#form').submit();
    })
    
 
    $(document).on('click', '.date', function() {
        var _this = $(this);
        var options = $(this).attr('data-options');
        var picker = new mui.DtPicker({
            type: "hour"
        });
        picker.show(function(rs) {
            _this.val(rs.text);
            picker.dispose();
        })
    });
    
	function upload(num){
		var str = "img"+num+"file";
		$("#"+str).click(); 
	}
	
	
    function fileChange1(that,v1,v2){  
        var filepath=$(that).val();  
        if(filepath=="")  
        {  
            return;  
        }  
        var extStart=filepath.lastIndexOf(".");  
        var ext=filepath.substring(extStart,filepath.length).toUpperCase();  
        if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){  
        	alert("只允许上传jpg、png、bmp、jpeg格式的图片");  
            return false;  
        }  
     //以图片宽度为800进行压缩  
    lrz(that.files[0], {  
         width: 400  
       })  
    .then(function (rst) {  
            //压缩后异步上传  
            $.ajax({  
            url : "${ctx}/mechanicalApply/common/fileUploadPicture",  
            type: "POST",  
            data : {  
                imgdata1:rst.base64//压缩后的base值  
            },  
            dataType:"json",  
            cache:false,  
            async:false,  
            success : function(data) {
            	if(data.status==0){
            		v1.attr("value",data.data);
            		v2.attr("src",data.forward);
            		//$('.img_upload .add_img.active img').attr('src', data.data);
            	}
                        },  
        error : function(){  
                alert("上传失败");  
                        }  
                    });  
         }); 
}  

    </script>
</body>

</html>
